<template>
    <div class = "app">
        <div class = "top">
            <aside>
                <article
                    @click="getImg1"
                   :class= "['img1',('img1' == Show ? 'blurImg':'')]"
                >
                    <div class = "img">
                        <img src="@/assets/images/new.png" alt="">
                    </div>
                    <p>
                        系统通知
                    </p>
                </article>
                <article
                    @click="getImg2"
                    :class= "['img2',('img2' == Show ? 'blurImg':'')]"
                >
                    <div class = "img">
                        <img src="@/assets/images/dingdan.png" alt="">
                    </div>
                    <p>
                        订单通知
                    </p>
                </article>
                <router-link
                    tag = "article"
                    to ="artificial"
                    :class= "['img3',('img3' == Show ? 'blurImg':'')]"
                >
                    <div class = "img">
                        <img src="@/assets/images/userph.png" alt="">
                    </div>
                    <p>
                        平台客服
                    </p>
                </router-link>
            </aside>
        </div> 
        <div class = "center" v-if = "Show == 'img1' ">
            <article 
                class = "null"
                v-if = "hidden"
                @click="goPath()"
            >
                <div class = "logo">
                    <img src="@/assets/images/head.png" alt="">
                </div>
                <section>
                    <h6>系统</h6>
                    <p>你存在商品待付款,点击查看详情</p>
                </section>
                <div class = "time">
                    <!-- 2016/07/07 -->
                </div>
            </article>
            <router-link
                v-if = "show"
                tag="article"
                v-for = "(i,index) in Arr"
                :key ="index"
                :to="{name:'sign',query:{id:index}}"
            >
                <div class = "logo">
                    <img src="@/assets/images/head.png" alt="">
                </div>
                <section>
                    <h6></h6>
                    <p>{{ i.title }}</p>
                </section>
                <div class = "time">
                    <!-- 2016/07/07 -->
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            Show:"img1",
            Arr:null,
            hidden:false,       
            Arr:null,
            show:false,
        }
    },
    created(){
        console.log(11)
        this.getLocal()
        this.show = false,
        this.$api.notice({}, res => {
            if (res.status) {
                this.Arr = res.data
                console.log(this.Arr)
                this.show = true
            }
        })
    },
    methods:{
        getImg1(){
            this.Show = 'img1';
        },
        getImg2(){
            this.$router.push("/allorder?tab=0")
        },
        getLocal(){
            this.hidden = false;
            this.Arr = JSON.parse(localStorage.getItem('pay'))
            console.log(this.Arr)
            if(this.Arr !=null || this.Arr != undefined){
                this.hidden = true ;
            }
        },
        goPath(){
            this.$router.push("/shopPage")
        }
    },
    // computed:{
    //     getLocal(){
    //         this.Arr = JSON.parse(localStorage.getItem('key'))
    //         // console.log(this.Arr)
    //         this.$store.state.pay = this.Arr
    //         return this.$store.state.pay
    //     }
    // },
    // watch:{
    //     getLocal(){
    //         this.get()
    //     }
    // }
}
</script>

<style lang="scss" scoped>
    .top{
        background:#e4776a;
        height:90px;
        position: relative;
        aside{
            height:90px;
            width:94%;
            background:#fff;
            display: flex;
            left:3%;
            top:40px;
            position: absolute;
            border-radius: 10px;
            align-items: center;
            justify-content: space-around;
            article{
                height:70px;
                width:50px;
                // background:yellow;
                &.blurImg{
                    color:red;
                }
                .img{
                    height:40px;
                    // background:pink;
                    width:40px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width:100%;
                        border-radius: 50%;
                        height:100%;
                    }
                }
                 p{
                    font-size:10px;
                    margin-top:10px;
                }
            }
        }
    }
    .center{
        height:auto;
        width:100%;
        padding:50px 10px;
        // border:1px solid #111;
        article{
            height:50px;
            width:100%;
            display: flex;
            background: #fff;
            position: relative;
            padding:5px 0px;
            border-bottom:1px solid #eee;
            .logo{
                height:100%;
                width:40px;
                background:#fff;
                border-radius: 10px;
                margin-right:10px;
                img{
                    height:100%;
                    width:100%;
                }
            }
            section{
                h6{
                    text-align: left;
                }
                p{
                    font-size:12px;
                    color:#666;
                    margin-top:5px;
                }
            }
            .time{
                position: absolute;
                top:5px;
                right:5px;
            }
        }
        .null{
            margin-bottom:10px;
            background: #fff;
            margin-top:10px;
        }
    }
</style>

